import { useState, useEffect } from "react";

import { Image } from "antd";
import "@/styles/productList.css";

import BANNER5 from "assets/banner5.jpg";
import WQPL02 from "assets/02_wqpl.jpg";
import PRO1 from "assets/pro1.png";
import PRO2 from "assets/pro2.png";
import PRO3 from "assets/pro3.png";
import PRO4 from "assets/pro4.png";
import PRO5 from "assets/pro5.png";
import PRO6 from "assets/pro6.png";
import PRO7 from "assets/pro7.png";
import PRO8 from "assets/pro8.png";

import { getProduct ,getAboutUs} from "@/utils/request/index";

function productList() {
  const [aboutData, setAboutData] = useState({
    category: [],
    description: {
      content: "",
      title: "",
    },
    mainImg: "",
  });

  function loadGetAboutUs() {
    getAboutUs().then((res) => {
      setAboutData({
        category: res.category,
        description: res.description,
        mainImg: res.mainImg,
      });
    });
  }

  const [goodsData, setGoodsData] = useState({
    goodsLists: [],
  });

  function loadGetProduct() {
    getProduct().then((res) => {
      setGoodsData({
        goodsLists: res.goods,
      });
    });
  }

  useEffect(() => {
    loadGetProduct()
    loadGetAboutUs()
  }, []);

  return (
    <>
      <div id="bannerShow">
        <a href="#">
          <Image src={BANNER5} alt="" />
        </a>
      </div>
      <div id="breadcrumb">
        <div className="container">
          <a href="index">首页</a>
          <span> >> </span>
          <a href="productList">产品展示</a>
        </div>
      </div>
      <div id="select" className="container">
        <div className="title">
          <h1 className="chinese">产品展示</h1>
        </div>
        <div className="content clearfix">
          <div className="list">
            {aboutData.category.map((item,index)=>{
              return <a href="#" key={index}>{item.label}</a>
            })}
            <Image src={WQPL02} alt="wqpl" />
          </div>
          <div className="listContent right clearfix">
            {goodsData.goodsLists.map((item,index)=>{
              return (
                <a href="productDetails" key={index} style={{display:"contents"}}>
                  <Image src={PRO1} alt="pro1" />
                  <div className="description"> 实木照片墙 创意绿色小鸟墙贴</div>
                  <div className="price">￥400.00</div>
                </a>
              )
            })}
           
            <div className="bottom clearfix">
              <span>共60条记录</span>
              <a href="#">1</a>
              <a href="#">2</a>
              <a href="#">3</a>
              <a href="#">4</a>
              <a href="#">5</a>
              <a href="#">下一页</a>
              <a href="#">末页</a>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default productList;
